<template>
	<view class="flex-col page">
		<view class="flex-col section space-y-60">
			<view class="flex-row justify-center relative">
				<image class="image pos" @click="backpage"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777480137488403283.png" />
				<text class="text">门店管理</text>
			</view>

			<view class="flex-col group">
				<view class="flex-row justify-between items-center section_2">
					<view class="flex-col items-start space-y-29">
						<text class="font_1 text_4">门店主图</text>
						<text class="font_2 text_5">优质图片更吸引用户访问，增加曝光</text>
					</view>
					<image class="image_3" src="https://gongxiangtaiqiu.axa2.com/taiqiu/shopimg.png" />
				</view>
			</view>
		</view>
		<view class="flex-col items-start relative section_3 space-y-29">
			<text class="font_1 text_6">门店信息</text>
			<view class="group_3">
				<text class="font_2">门店名称：</text>
				<text class="font_3">{{shopinfo.f_shop_name}}</text>
			</view>
			<!-- <view class="group_4">
	      <text class="font_2">所在城市：</text>
	      <text class="font_4">{{shopinfo.f_city}}</text>
	    </view> -->
			<view class="group_5">
				<text class="font_2">联系电话：</text>
				<text class="font_4">{{shopinfo.f_phone}}</text>
			</view>
			<view class="group_6">
				<text class="font_2">门店地址：</text>
				<text class="font_3">{{shopinfo.f_address}}</text>
			</view>
		</view>
		<button style="height: 40px; margin: auto;margin-top: 20px; display: flex;align-items: center;"
			@click="setshop">修改门店信息</button>
		<u-modal v-model="show" title="修改门店信息" confirm-color="#19C865" :title-style="{color:'black'}" @confirm="confirm"
			:mask-close-able="true" @cancel="cancel">
			<view class="slot-content">
				<view style="display: flex; align-items: center; width: 270px; height: 72px; margin-left: 15px;">
					<view>门店名称：</view><input class="time" v-model="shopinfo.f_shop_name"
						style="border-bottom: 1px solid #d6d2d2;" />
				</view>
				<view style="display: flex; align-items: center; width: 270px; height: 72px; margin-left: 15px;">
					<view>联系电话：</view><input class="time" v-model="shopinfo.f_phone"
						style="border-bottom: 1px solid #d6d2d2;" />
				</view>
				<view style="display: flex; align-items: center; width: 270px; height: 72px; margin-left: 15px;">
					<view>开店城市：</view>
					<pickerAddress class="custom_input time" @change="change">
						<input type="text" style="color: black;" value="" disabled placeholder="请输入开店城市"
							v-model="form.city.toString()" />
					</pickerAddress>
				</view>
				<view style="display: flex; align-items: center; width: 270px; height: 72px; margin-left: 15px;">
					<view>详细地址：</view><input class="time" v-model="shopinfo.f_address"
						style="border-bottom: 1px solid #d6d2d2;" />
				</view>
			</view>
		</u-modal>
	</view>

</template>

<script>
	import pickerAddress from '@/uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				show: false,
				shopinfo: {},
				form: {
					city: '',
					allcity: [],
				},
				lat:'',
				lng:'',
				
			};
		},
		onLoad() {
			this.getShopInfo()

		},
		methods: {
			change(data) {
				this.form.city = data.data.join("")
				this.form.allcity = data.data
				console.log(data.data)
				console.log(this.form.city)
			},
			//商家信息
			getShopInfo() {
				this.$Api.getShopInfo({
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					this.shopinfo = res.data.data
					console.log(res.data.data, '商家信息')
				})
			},
			getjw(){
				this.$Api.getJW({
					province: this.form.allcity[0],
					city: this.form.allcity[1],
					region: this.form.allcity[2],
					address: this.shopinfo.f_address,
				
				}).then(res => {
				
					console.log(res.data.data.location,'qweqweqwe')
					this.lat = res.data.data.location.lat
					this.lng = res.data.data.location.lng
					console.log('lat', this.lat, 'lng', this.lng)
					//认证接口
					
				}, err => {})
			},
			//修改
			confirm() {
				if (!this.form.city) {
					uni.showToast({
						title: '请输入开店城市',
						icon: 'none'
					})
					return
				}
				//根据地区获取经纬度
				this.getjw()
				setTimeout(()=>{
					this.$Api.changeShopInfo({
						id: uni.getStorageSync('Bshop_id'),
						shopName: this.shopinfo.f_shop_name,
						phone: this.shopinfo.f_phone,
						province: this.form.allcity[0],
						city: this.form.allcity[1],
						area: this.form.allcity[2],
						address: this.shopinfo.f_address,
						lon:this.lng,
						lat:this.lat,
						
					}).then(res => {
						console.log(res)
						this.getShopInfo()
					});
				},300)
				
			},
			setshop() {
				this.show = true;
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		padding-bottom: 847rpx;
		background-color: #f3f3f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 104rpx 23rpx 291rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.space-y-60>view:not(:first-child),
	.space-y-60>text:not(:first-child),
	.space-y-60>image:not(:first-child) {
		margin-top: 60rpx;
	}

	.image {
		width: 20rpx;
		height: 34rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.group {
		padding: 0 7rpx;
	}

	.group_2 {
		padding-bottom: 39rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.image_2 {
		width: 24rpx;
		height: 22rpx;
	}

	.section_2 {
		padding: 22rpx 27rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font_1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 700;
		color: #222222;
	}

	.text_4 {
		margin-left: 3rpx;
	}

	.font_2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #6b6b6b;
	}

	.text_5 {
		color: #999999;
		line-height: 27rpx;
	}

	.image_3 {
		margin-right: 3rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.section_3 {
		margin: -272rpx 30rpx 0;
		padding: 40rpx 26rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 29rpx;
	}

	.text_6 {
		margin-left: 4rpx;
	}

	.group_3 {
		line-height: 25rpx;
	}

	.font_3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #222222;
	}

	.group_4 {
		line-height: 25rpx;
	}

	.font_4 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 21rpx;
		font-weight: 500;
		color: #222222;
	}

	.group_5 {
		line-height: 25rpx;
	}

	.group_6 {
		line-height: 25rpx;
	}
</style>